<script setup lang="ts">
import { router, shortenString, toast } from "@/utils/tools";
import { computed, ref } from "vue";
import { apiIncomeApply, sendGoods, incomeConfirm } from "@/apis/order";
import { onShow } from "@dcloudio/uni-app";
import { isImg } from "@/utils/tools";
import { getImgSrc } from "@/utils/tools";

const expressFlag = ref(false);
let asdPopup = ref(true);
let refundReason = ref("");

// 详情
const chooseDetail = (e: any) => {
  // tabFlag.value = flag;
};
const props = defineProps(["scene", "orderDetail", "getDetail"]);

const productDescribes = computed(() => {
  return shortenString(props?.orderDetail?.describes || "", 20);
});
const isImg = (url = "") => {
  if (
    url.indexOf(".png") > -1 ||
    url.indexOf(".jpg") > -1 ||
    url.indexOf(".jpeg") > -1 ||
    url.indexOf(".webp") > -1
  ) {
    return true;
  }
  return false;
};
const productImage = computed(() => {
  const str = props?.orderDetail?.images?.split(",")?.[0];
  if (isImg(str)) {
    return str;
  }
  return str + "?x-oss-process=video/snapshot,t_0,f_jpg";
});
const openPopup = () => {
  asdPopup.value.open(true);
};
const closePopup = () => {
  asdPopup.value.close();
};
const handleRefued = async () => {
  const data = {
    content: refundReason.value,
    shoppingId: props.orderDetail.id,
  };
  const res = await apiIncomeApply(data);
  if (res.code === 200) {
    props.getDetail();
    closePopup();
  }
  toast(res.msg);
};
const handleSendGoods = () => {
  router(`/pagesOrder/order/deliver?id=${props.orderDetail.id}`);
};
const handleIncomeConfirm = async () => {
  const data = { shoppingId: props.orderDetail.id };
  const res = await incomeConfirm(data);
  if (res.code === 200) {
    props.getDetail();
  }
  toast(res.msg);
};
const sendTypeFilter = computed(() => {
  return (sendType) => {
    if (sendType === 0) {
      return "待发货";
    } else if (sendType === 1) {
      return "待收货";
    } else if (sendType === 2) {
      return "已完成";
    } else if (sendType === 3) {
      return "退款中";
    }
  };
});
const authenticationFilter = computed(() => {
  return (authentication) => {
    if (authentication === "0") {
      return "待认证";
    } else {
      return "已认证";
    }
  };
});
onShow(() => {
  props.getDetail();
});
</script>
<template>
  <view class="user-orderdress">
    <view class="adress-top">
      <view class="adress-img">
        <image src="@/static/images/orderwz.png" />
      </view>
      <view class="adress-name">
        <text>{{ orderDetail.consumerName }}</text>
        <text class="name-line">|</text>
        <text>{{ orderDetail.phone }}</text>
      </view>
    </view>
    <view class="adress-detail" v-if="orderDetail.address">{{
      orderDetail.address
    }}</view>
  </view>
  <view class="order-card l-card">
    <view class="order-card-header flex flex-between">
      <view class="flex store flex-center">
        <image src="@/static/images/bugicon@2x.png" />
        <text>{{ orderDetail.shopName }}</text>
      </view>
      <view class="flex order-card-header-tag">
        <view class="card-rit">{{ sendTypeFilter(orderDetail.sendType) }}</view>
        <!-- <view v-if="scene == 'sell'">
          <uv-tags
            v-if="orderDetail.remark == null"
            text="待发货"
            plain
            plainFill
            size="mini"
            type="error"
          ></uv-tags>
          <uv-tags v-else text="已发货" plain plainFill size="mini"></uv-tags>
        </view> -->
      </view>
    </view>
    <view class="order-details-line"> <uv-line /></view>

    <view class="order-card-content flex">
      <view class="flex flex-between">
        <!-- <image :src="productImage" /> -->
        <!-- <image v-if="isImg(productImage)" :src="productImage" />
        <image
          v-else
          :src="productImage + '?x-oss-process=video/snapshot,t_0,f_jpg'"
        /> -->
        <image :src="getImgSrc(orderDetail)" />
      </view>
      <view>
        <view class="flex flex-column goods-details">
          <!-- <view class="content">
            {{ productDescribes }}
          </view> -->
          <view class="goods-tag">
            <view class="card-rz" v-if="orderDetail.authentication != '0'">{{
              authenticationFilter(orderDetail.authentication)
            }}</view>
            <text>
              {{ orderDetail.title }}
            </text>
            <!-- <uv-tags
              v-if="orderDetail.authentication == 1"
              text="已认证"
              plain
              size="mini"
            ></uv-tags>
            <uv-tags v-else text="未认证" plain size="mini"></uv-tags> -->
          </view>
          <view class="flex flex-align-center price">
            <view class="pay-price">￥{{ orderDetail.currentPrice }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view class="order-details ordertype">
    <view class="info-header"><text>订单信息：</text></view>
    <view class="order-details-line"> <uv-line /></view>
    <template v-for="item in JSON.parse(orderDetail.dict || '[]')">
      <view class="flex flex-between typetext">
        <text class="fieldname">{{ item.fieldName }}</text>
        <text>{{ item.name }}</text>
      </view>
      <view class="order-details-line"> <uv-line /></view>
    </template>
    <!-- <view class="flex flex-between">
      <text>类型</text>
      <text>{{ orderDetail.types }}</text>
    </view>
    <view class="order-details-line"> <uv-line /></view>
    <view class="flex flex-between">
      <text>品牌</text>
      <text>{{ orderDetail.brand }}</text>
    </view>
    <view class="order-details-line"> <uv-line /></view>
    <view class="flex flex-between">
      <text>成色</text>
      <text>{{ orderDetail.fineness }}</text>
    </view>
    <view class="order-details-line"> <uv-line /></view> -->
    <view class="flex flex-between typetext">
      <text class="fieldname">配送</text>
      <text v-if="orderDetail.delivery == 0">包邮</text>
      <text v-if="orderDetail.delivery == 1">不包邮</text>
      <text v-if="orderDetail.delivery == 2">自取</text>
    </view>
  </view>
  <!-- 收货信息 -->
  <view class="order-receive l-card">
    <view class="info-header"><text>收货信息：</text></view>
    <view class="order-details-line"> <uv-line /></view>

    <view class="info">
      <text>收货信息：</text
      ><text>{{ orderDetail.recipient }}({{ orderDetail.phone }})</text>
    </view>
    <view class="order-details-line"> <uv-line color="#F1F1F1" /></view>
    <view class="address">
      <text>收货地址：</text
      ><text>{{ orderDetail.area }}{{ orderDetail.userAddress }}</text>
    </view>
  </view>
  <view class="order-express l-card">
    <view class="info flex flex-between">
      <text>物流信息：</text
      ><text v-if="!orderDetail.remark" class="expree-tag">未上传</text>
    </view>
    <view class="order-details-line"> <uv-line /></view>
    <view v-if="orderDetail.remark">
      <view class="tims flex">
        <text>快递费用：</text><text>{{ orderDetail.money }}元</text>
      </view>
      <view class="order-details-line"> <uv-line /></view>

      <view class="flex">
        <text>快递公司：</text><text>{{ orderDetail.expressDelivery }}</text>
      </view>
      <view class="order-details-line"> <uv-line /></view>

      <view class="flex">
        <text>物流单号：</text><text>{{ orderDetail.oddNumbers }}</text>
      </view>
    </view>
  </view>
  <!-- v-if="scene == 'sell'" -->
  <!-- <view class="sellbtn-wrap">
    <view
      class="btn flex flex-center"
      v-if="scene == 'buy' && orderDetail.status === 1"
    >
      <button class="sell-btn flex flex-center" @click="openPopup">退款</button>
    </view>
    <view
      v-if="orderDetail.status === 1 && orderDetail.sendType === 0 && scene == 'sell'"
      class="btn flex flex-center"
    >
      <button class="sell-btn flex flex-center" @click="handleSendGoods">
        立即发货
      </button>
    </view>

    <view
      v-if="orderDetail.status === 3 && scene == 'sell'"
      class="btn flex flex-center"
    >
      <button class="sell-btn flex flex-center" @click="handleIncomeConfirm">
        确认退款
      </button>
    </view>
  </view> -->
  <uv-popup
    ref="asdPopup"
    mode="bottom"
    :closeable="false"
    zoom="true"
    round="10"
  >
    <view class="validate">
      <view class="btn-wrapp">
        <view class="btn-wrapp-left" @click="closePopup">取消</view>
        <view class="btn-wrapp-midd">请输入退款原因</view>
        <view class="btn-wrapp-right" @click="handleRefued">确定</view>
      </view>
      <view class="textarea-wrapper">
        <uv-textarea
          class="textarea"
          v-model="refundReason"
          placeholder="请输入退款原因"
        ></uv-textarea>
      </view>
    </view>
  </uv-popup>
</template>
<style scoped lang="scss">
.user-orderdress {
  background: linear-gradient(180deg, #fff4f6 0%, #ffffff 100%);
  box-shadow: 0rpx 5rpx 20rpx 0rpx rgba(211, 211, 211, 0.05);
  border-radius: 16rpx;
  border: 2rpx solid #ffffff;
  padding: 34rpx 30rpx;
  margin: 20rpx 0;
  .adress-top {
    display: flex;
    align-items: center;
    .adress-img {
      width: 32rpx;
      height: 32rpx;
      image {
        width: 100%;
        height: 100%;
        vertical-align: top;
      }
    }
    .adress-name {
      font-weight: bold;
      font-size: 28rpx;
      color: #000000;
      margin-left: 10rpx;
      .name-line {
        color: #c8c8c8;
        margin: 0 14rpx;
      }
    }
  }
  .adress-detail {
    font-weight: 400;
    font-size: 24rpx;
    color: #999999;
    margin-top: 14rpx;
  }
}
.validate {
  height: 300px;
  border-radius: 16px 16px 0px 0px;
  background-color: rgba(255, 255, 255, 1);
  .btn-wrapp {
    display: flex;
    height: 50px;
    border: 1rpx solid rgba(190, 190, 190, 1);
    .btn-wrapp-left {
      width: 60px;
      color: rgba(154, 154, 154, 1);
      font-size: 14px;
      text-align: center;
      line-height: 50px;
      font-family: PingFangSC-regular;
    }
    .btn-wrapp-midd {
      flex: 1;
      text-align: center;
      line-height: 50px;
      color: rgba(0, 0, 0, 1);
      font-size: 16px;
      text-align: center;
      font-family: PingFangSC-regular;
    }
    .btn-wrapp-right {
      width: 60px;
      color: rgba(50, 140, 254, 1);
      font-size: 14px;
      text-align: center;
      line-height: 50px;
      font-family: PingFangSC-regular;
    }
  }
  .textarea-wrapper {
    margin-top: 20px;
    padding: 0 15px;
  }
}
.store {
  text {
    font-size: 32rpx;
    color: #101010;
    font-weight: bold;
    margin-left: 17rpx;
  }
}

.order-card {
  .order-card-header {
    image {
      width: 50rpx;
      height: 50rpx;
    }
  }

  .order-card-content {
    font-size: 28rpx;

    .content {
      font-size: 28rpx;
      font-weight: bold;
    }

    image {
      width: 170rpx;
      height: 170rpx;
      border-radius: 16rpx;
    }

    .goods-details {
      padding: 0 20rpx;

      .content {
        margin-bottom: 5rpx;
      }

      .goods-tag {
        margin-bottom: 10rpx;
        -webkit-line-clamp: 2;
        overflow: hidden;
        height: 112rpx;
      }
    }

    .pay-price {
      font-size: 28rpx;
      color: #f3604e;
      font-size: 32rpx;
      font-weight: bold;
    }

    .line-price {
      color: #cecece;
      font-size: 24rpx;
      margin-left: 10rpx;
    }
  }

  .order-details {
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #101010;
    font-weight: bold;
  }
}

.order-receive {
  .info-header {
    font-weight: bold;
  }

  .address {
    text-indent: -5em;
    padding-left: 5em;
    line-height: 1.5;
  }
}

.order-express {
  // box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.1);
  margin-top: 20rpx;
  margin-bottom: 200rpx;
  .expree-tag {
    font-size: 24rpx;
    color: #9a9a9a;
    font-weight: normal;
  }
}

.btn {
  // margin-top: 60rpx;
  width: 100%;
}

.sell-btn {
  // background: linear-gradient(
  //   0deg,
  //   rgba(191, 1, 3, 1) 0%,
  //   rgba(255, 84, 2, 1) 99.2%
  // );
  background: #c7452f;
  border-radius: 50rpx;
  color: #ffffff;
  font-size: 14px;
  width: 600rpx;
  height: 100rpx;
  border-radius: 24rpx;
  text-align: center;
}
.card-rit {
  font-weight: 400;
  font-size: 28rpx;
  color: #c7452f;
}
.card-rz {
  width: 112rpx;
  padding: 14rpx 10rpx;
  background: #06a8ff;
  font-weight: 400;
  font-size: 22rpx;
  color: #ffffff;
  float: left;
  margin: 10rpx;
  border-radius: 14rpx 14rpx 30rpx 14rpx;
  text-align: center;
}
.ordertype {
  background: #ffffff;
  box-shadow: 0rpx 5rpx 20rpx 0rpx rgba(211, 211, 211, 0.05);
  border-radius: 16rpx;
  padding: 40rpx 30rpx;
  margin: 20rpx 0;
  .info-header {
    font-weight: 500;
    font-size: 32rpx;
    color: #000000;
  }
  .typetext {
    font-weight: bold;
    font-size: 28rpx;
    color: #000000;
  }
  .fieldname {
    font-weight: 400;
    font-size: 28rpx;
    color: #666666;
  }
}
.l-card {
  padding: 30rpx;
}
.sellbtn-wrap {
  background: #ffffff;
  padding: 10rpx 40rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}
</style>
